<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="content-language" content="zh-CN" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <meta name="screen-orientation" content="portrait">
    <meta name="x5-orientation" content="portrait">
    <meta name="full-screen" content="yes">
    <meta name="x5-fullscreen" content="true">
    <meta name="browsermode" content="application">
    <meta name="x5-page-mode" content="app">
    <meta name="msapplication-tap-highlight" content="no">
    <title>附近</title>
    <style type="text/css" rel="stylesheet">
      html,body{margin:0;padding:0;width:100%;height:100%;}
      img,canvas{-webkit-touch-callout:none;}
      #container{width:100%;height:100%;}
      .amap-logo img{margin-left:55px;margin-bottom:10px;}
      .amap-scalecontrol{margin-left:58px;margin-bottom:15px;}
      .amap-copyright{display: none;}
      .locationIcon{background-color:#fff;width:36px;height:36px;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        box-shadow: 2px 2px 5px #888888;
      }
      .locationIcon>img{width:32px;margin-left:2px;margin-top:2px;}
      .makerStyle{background-color:#FF4814;font-size:12px;color:#fff;
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        border-radius: 2px;
        width:50px;
        height:30px;
        line-height:30px;
        text-align: center;
      }
      .infoWindow{
        width:280px;
        height:130px;
        font-size:13px;
        background-color:#fff;
        box-shadow: 2px 2px 2px #888;
        padding-bottom: 20px;
      }
      .info_arrow{
        height:20px;
        width:20px;
        transform:rotate(-45deg);
        -ms-transform:rotate(-45deg);
        -moz-transform:rotate(45deg);
        -webkit-transform:rotate(45deg);
        -o-transform:rotate(45deg);
        padding-left: 0 !important;
        position: absolute;
        left:125px;
        top:132px;
        background-color:#ffffff;
        z-index: 4;
      }
      .info_title{
        background-color:#0090FF;
        height:28px;line-height:28px;color:#fff;padding-left:10px;
      }
      .infoWindow>div{padding-left:10px;margin-bottom:5px;}
      .info_name{margin-top:10px;}
      .info_address{color: #434754;}
      .info_type{color: #434754;}
      .info_dis{}
      .dis_span{color: #FA2D00;font-weight: bold;}
      .info_close{position: absolute;width:28px;height:26px;right:0;top:0;}
      .info_close>img{margin-top:3px;right:3px;width:20px;}
      .loc_circle{width:50px;height:50px;border:2px solid #49B3F4;
        border-radius:50px;background-color:#64C7FA;opacity:0.5;}
      .loc_img{position: relative;left:20px;top:-34px;}
    </style>
    <script src="http://webapi.amap.com/maps?v=1.4.4&key=b9c503c21f0b0dfdee1adaf5fb6bb363"></script>
  </head>
<body>
  <div id="container"></div>
  <div id="panel"></div>
  <script type="text/javascript">
    var isiPhone = navigator.userAgent.toLocaleLowerCase().match(/iPhone/i);
    var map = new AMap.Map('container', {
      resizeEnable: true,
      zoom: 15
    });
    var walking = null;

    var locationIcon = '<div class="locationIcon">'
    + '<img src="./geolocation.png"/>'
    + '</div>';

    var locationComplete = function(data){
      map.clearMap();
      doSearch([data.position.lng, data.position.lat]);
    };
    var locationError = function(){
      alert('定位失败，请在手机上开启定位:设置->隐私->定位服务->找厕所->使用应用期间');
    };

    map.plugin('AMap.Geolocation', function () {
      var geolocation = new AMap.Geolocation({
        enableHighAccuracy: true,
        timeout: 60000,
        maximumAge: 0,
        convert: true,
        showButton: true,
        buttonPosition: 'LB',
        buttonOffset: new AMap.Pixel(10, 10),
        showMarker: true,
        showCircle: true,
        panToLocation: true,
        zoomToAccuracy:true,
        buttonDom: locationIcon
      });
      map.addControl(geolocation);
      geolocation.getCurrentPosition();
      AMap.event.addListener(geolocation, 'complete', locationComplete);
      AMap.event.addListener(geolocation, 'error', locationError);
    });

    map.plugin(["AMap.ToolBar"],function(){
      map.addControl(new AMap.ToolBar());
    });
    map.plugin(["AMap.Scale"],function(){
      map.addControl(new AMap.Scale());
    });
    AMap.service('AMap.Walking', function(){
      walking= new AMap.Walking({
        map: map
      });
    });
    function _closeInfoWindow(){
      map.clearInfoWindow();
    }
    function doSearch(center){
      //展示定位
      var marker = new AMap.Marker({
        position: center,
        map: map,
        content:'<div class="loc_circle"></div><img class="loc_img" src="loc.png" style="width:16px;"/>'
      });
      AMap.service(["AMap.PlaceSearch"], function() {
        var placeSearch = new AMap.PlaceSearch({
          pageSize: 10,
          extensions: 'base',
          type: '200300|200300|200302|200303'
        });
        placeSearch.searchNearBy("厕所", center, 2000, function(status, result) {
          if (status === 'complete' && result.info === 'OK') {
            var pois = result.poiList.pois;
            pois.forEach(function(poi){
              var divStr = '<div class="makerStyle">' + poi.distance + '米</div>';
              var info = '<div class="infoWindow"><div class="info_title">卫生间</div>'
                + '<div class="info_name">名称: ' + poi.name+ '</div>'
                + '<div class="info_dis">距您: ' + '<span class="dis_span">' + poi.distance + '米</span>' + '</div>'
                + '<div class="info_address">地址: ' + poi.address+ '</div>'
                + '<div class="info_type">类型: ' + (poi.type || '卫生间')+ '</div>'
                + '<div class="info_arrow"></div>';
              if(isiPhone && isiPhone.length){
                info +='<div class="info_close" ontouchstart="_closeInfoWindow()"><img src="close_blue.png" style=""/></div>'
                  + '</div>';
              }else{
                info += '<div class="info_close" onclick="_closeInfoWindow()"><img src="close_blue.png" style=""/></div>'
                + '</div>';
              }
              var marker = new AMap.Marker({
                position: poi.location,
                title: poi['name'],
                map: map,
                content: divStr,
                offset: new AMap.Pixel(10,-25)
              });

              function showInfo(){
                var infowindow = new AMap.InfoWindow({
                  content: info,
                  offset: new AMap.Pixel(40,-35),
                  isCustom: true
                });
                infowindow.open(map, poi.location);
                //步行路径规划
                walking.clear();
                var start = new AMap.LngLat(center[0], center[1]);
                var end = poi.location;
                walking.search(start, end);
              }

              if(isiPhone && isiPhone.length){
                AMap.event.addListener(marker, 'touchstart', showInfo);
              }else{
                AMap.event.addListener(marker, 'click', showInfo);
              }

            });
            map.setZoom(16);
          }else{
            alert('该地点没有查询到相关数据');
          }
        });
      });
    }

    document.querySelector('a.amap-logo').onclick = function(){
      return false;
    };
    //本地开发测试代码
    //doSearch([121.390686, 31.213976]);
    //map.setCenter([121.390686, 31.213976]);
  </script>
</body>
</html>